<template>
	<view class="container">
		<view class="list-cell b-b avatar btn" hover-class="cell-hover" :hover-stay-time="50" >
			<button open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
			<text class="cell-tit">头像</text>
			<image :src="urls" mode="aspectFill"></image>
			<text class="cell-more yticon icon-you"></text>
			
			
		</view>
		<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">昵称</text>
			<view class="cell-tip" style="width: 60%;height: 100%;">
				<input type="nickname" v-model="nickname" @change="input" style="width: 100%;height: 100%;text-align: end;" >
			</view>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<button type="primary" @click="submit" style="margin-top: 20rpx;">确认修改</button>
		<!-- <view class="list-cell m-t b-b" @tap="sex"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">性别</text>
			<text class="cell-tip">{{sexType}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell" @click="navTo('../../set/grzl/nc/nc?ty=org&name=生日&v='+listgrzl.birthday)" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">生日</text>
			<text class="cell-tip">{{listgrzl.birthday}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell">
			<text class="cell-tit">手机号</text>
			<text class="cell-tip">{{listgrzl.mobile}}</text>
		</view> -->
<!-- 		
		<view class="list-cell b-b" @click="navTo('../../set/grzl/nc/nc?ty=sg&name=身高&v='+listgrzl.sg)">
			<text class="cell-tit">身份证号</text>
			<text class="cell-tip">{{listgrzl.sg}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view> -->
		<!-- <avatar @upload="doUpload" @avtinit="doBefore" quality="1" ref="avatar"></avatar> -->
	</view>
</template>

<script>
	import avatar from "../../../components/yq-avatar/yq-avatar.vue";
	let sex = ['女', '男'];
	import { mapMutations} from 'vuex';
	export default {
		data() {
			return {
				urls:'',
				nickname:'',
				sexsi:'',
				array: [],
				ageid: 0,
				listgrzl:[],
				msg:false,
				imgUrl:this.configs.imgUrl
			};
		},
		onShow(){
			 let userinfo = uni.getStorageSync('userinfo');
			 this.nickname=userinfo.nickname
			 this.urls=userinfo.avatar
			
		},
		methods:{
			input(e){
				console.log(e.detail.value)
				this.nickname=e.detail.value
			},
			submit(){
				this.$ajax('post','user/edit',{
					nickname:this.nickname,
					avatar:this.urls
				}).then(res=>{
					uni.showToast({ title: '保存成功',icon:"none" });
					uni.navigateBack({
						delta:1
					})
				})
			},
			chooseavatar(e){
				// this.urls=e.detail.avatarUrl
				let _this = this;
				uni.uploadFile({
					 url:'https://xcx.htxxkj.net/api/user.v1_0.upload/image',
					 name: 'file',
					 filePath:e.detail.avatarUrl,
					 header:{
						 token : uni.getStorageSync('token')
						 },
					 success(res) {
						 let data = JSON.parse(res.data);
						 _this.urls = data.data.url
						 console.log(this.urls)
					 },
					 fail(res) {
						console.log(2,res);
					 }
				})
			
			},
			navTo(url){
				uni.navigateTo({
					url:url,
					animationType: 'slide-in-bottom',
				})
			},
			navsTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
		components: {
			avatar
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.yyt-ellipsis{
		display: inline-block;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //溢出用省略号显示
		white-space:nowrap; //溢出不换
	}
	.avatar{
		padding-top: 40upx!important;
		padding-bottom: 40upx!important;
	}
	.agess{
		position: absolute;
		z-index: 2;
		top: 0px;
		right: 0px;
		height: 100%;
		line-height: 38px;
		padding-left: 200px;
		padding-right: 36px!important;
		background: transparent;
	}
	.avatar .cell-tit{
		font-weight: bold!important;
	}
	.btn{
		position: relative;
	}
	.btn button{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	
	.avatar image{
		position: absolute;
		top: 50%;
		right: 36px;
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
		margin-top: -44upx;
		z-index: 1
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
